<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="红包/打赏设置"> </mh-header>
      <div class="set-form">
        <div class="form-row">
          <label>请设置单次红包金额（最低5元）</label>
          <input type="text" placeholder="请输入红包金额" v-model="envelope">
        </div>
        <div class="form-row">
          <label>请设置单次打赏金额（最低1元）</label>
          <input type="text" placeholder="请输入打赏金额" v-model="singleReward">
        </div>
        <div class="form-row">
          <label>请设置才艺被打赏单次金额（最低1元）</label>
          <input type="text" placeholder="请输入打赏金额" v-model="talentReward">
        </div>
        <div class="tip">
          <h4><img src="../../assets/images/ico/ic_tip.png" alt="图标">说明</h4>
          <p>1.设置打赏金额后每次单击打赏的发出金额即默认为设置金额</p>
          <p>2.如有疑问请联系客服</p>
        </div>

        <div class="mui-content-padded">
          <button type="button" class="mui-btn-block mh-btn" @click='submit'>确定</button>
        </div>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "reward-setting",
    data () {
      return {
        envelope: 5,
        singleReward: 1,
        talentReward: 1
      }
    },
    methods: {
      submit(){
        let self = this;
        MH_API.setMoney({
          hongbao: self.envelope,
          dashang: self.singleReward,
          caiyi: self.talentReward
        }).then(res => {
          if (res.status === 200) {
            mui.toast("设置成功");
            setTimeout(function(){
              self.$router.back(-1);
            }, 1500)
            
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  .set-form {
    padding: 1rem;
    background-color: #fff;
  }
  .form-row {
    label {
      font-size: 1.4rem;
      color: #333;
    }
    input {
      height: 4rem;
      margin-top: 1rem;
      border: 1px solid #eee;
    }
  }
  .tip {
    margin-bottom: 4rem;
    font-size: 1.4rem;
    color: #333;
    h4 {
      margin-bottom: 1rem;
      font-size: 1.2rem;
      color: #666;
      img {height: 1.6rem;width: auto;margin-right: .4rem;}
    }
    p {
      font-size: 1.2rem;
      color: #aaa;
    }
  }
</style>
